<!-- campo dentro formulario -->
<div class="crudField crud_text">
	<label for="origenDato"> Origen de Dato </label>
	<select id="origenDato" name="object.origenDato.id">
		<option value="">&{'crud.none'}</option> 
		#{list items:_origenDatos,	as:'origenDato'}
			<option value="${origenDato.id}" #{if (_field!=null && _field.origenDato!=null && origenDato.id.equals(_field.origenDato.id))} selected #{/if}>
			${origenDato.nombre}
			</option>
		#{/list}
	</select>  
	<img id="searchOrigenDato" src="/public/images/Add.png" alt="Add">
</div>

<!-- dialogo para busqueda de entidad -->
<div id="dialog-search-origenDatos"  style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Origen de Dato'}
		<input type="text" id="origenDatoSearch" name="origenDatoSearch">
		<img id="addOrigenDato" src="/public/images/Add.png" alt="Add">
		</h2>
		<div class="objectForm">
			<div class="crudField crud_text" id="origenDatosDiv">
				<table id="origenDatosTable">			
					#{list items:_origenDatos, as:'origenDato'}				
						<tr><td><a href="#" onclick='selectAndCloseOrigenDatoDialogs("${origenDato.id}");' class="origenDato" >${origenDato.nombre}</a></td></tr>
					#{/list}
				</table>
			</div>
		</div>	
</div> 

<!-- dialogo para alta de nueva entidad -->
<div id="dialog-add-origenDato"  class="dialogOrigenDato" style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Origen de Dato'}</h2>
		<div class="objectForm">
			<div class="crudField crud_text" style="height: 50px;">
				<label for="object_descripcion" >
	        		nombre
	    		</label>
	    		<input id="origenDato_nombre" type="text" name="origenDato.nombre" value="" style="float: right;" size="40">			    
			</div>
		</div>
		<input type="submit" name="_save" value="&{'crud.save'}" style="margin-top: 10px;" onclick="saveOrigenDato();"/>	
</div>

<script type="text/javascript">

$().ready(function() {
	
	$( "#dialog-search-origenDatos").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#dialog-add-origenDato").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#searchOrigenDato" ).click(function() {
		$( "#dialog-search-origenDatos" ).dialog( "open" );
		return false;
	});
	$( "#addOrigenDato" ).click(function() {
		$( "#dialog-add-origenDato" ).dialog( "open" );
		return false;
	});
	
	$("#origenDatoSearch").keyup(function() {
		  searchOrigenDatos();
	});
});

/* esta funcion busca las entidades segun el criterio de busqueda */
function searchOrigenDatos(){
	$.get("/OrigenDatos/search",  {
		nombre: $("#origenDatoSearch").val()
	},function(data, id){
		if(data[0] != 'ERROR'){
			$("#origenDatosTable").remove();
			var origenDatos = JSON.parse(data[1]);
			var i = 0;
			html = "<table id='origenDatosTable'>";
			for(i = 0; i < origenDatos.length; i++) {
				html = html + 
				'<tr><td><a href="#" onclick="selectAndCloseOrigenDatoDialogs('+origenDatos[i].id+');" class="origenDato" >'+origenDatos[i].nombre+'</a></td></tr>';				
			}
			html = html + "</table>";
			$("#origenDatosDiv").append(html);
			return false;
		} else {
			return false;
		}
		
	},'json');
}

/* esta funcion guarda la nueva entidad en la base de datos y la setea en el campo del formulario */
function saveOrigenDato() {
	valor = $('#origenDato_nombre').val();
	
	$.get("/OrigenDatos/create",  {
		valor: valor
	},function(data){
		if(data[0] != 'ERROR'){
			saveAndCloseOrigenDatoDialogs(data[1], valor);
		}else {
			alert(data[1]);
		}
		
	},'json');
	
}

/* esta funcion agrega el nuevo campo en el formulario y cierra los dialogs */
function saveAndCloseOrigenDatoDialogs(id, valor){
	
	$("#origenDato").append('<option value=' + id + ' selected>' + valor +'</option>');
	
	closeOrigenDatoDialogs();
}

/* esta funcion setea el campo seleccionado en el formulario y cierra los dialogs */
function selectAndCloseOrigenDatoDialogs(id){
			
	$("#origenDato option[value='"+id+"']").prop('selected', true);
	
	closeOrigenDatoDialogs();
}

function closeOrigenDatoDialogs(){
	$('#origenDatoSearch').val("");
	$('#origenDato_nombre').val("");
	$("#dialog-add-origenDato").dialog( "close" );
	$("#dialog-search-origenDatos").dialog( "close" );
}
</script>